<template>
  <div class="part2">
    <div class="width1200">
      <table class="table">
        <tr>
          <td rowspan="2">
            <div class="bigBox">
              <svg t="1690964443235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2690" width="60" height="60"><path d="M886.272 855.552H141.824c-12.288 0-21.504-9.216-21.504-21.504v-486.4c0-12.288 9.216-21.504 21.504-21.504h744.448c12.288 0 21.504 9.216 21.504 21.504v486.4c0 11.776-9.216 21.504-21.504 21.504z m-722.944-43.008h701.44V369.152h-701.44v443.392z" fill="#666666" p-id="2691"></path><path d="M157.696 362.496L126.464 332.8l131.072-137.216c4.096-4.096 9.216-6.656 15.36-6.656h491.008c6.144 0 12.288 2.56 15.872 7.168L902.144 332.8l-32.256 28.672-115.2-130.048H282.112c0 1.024-124.416 131.072-124.416 131.072z" fill="#666666" p-id="2692"></path><path d="M288.256 442.368h43.008v296.96h-43.008zM486.4 442.368h43.008v296.96H486.4zM692.736 442.368h43.008v296.96h-43.008z" fill="#0B4AC0" p-id="2693"></path></svg>
              <span class="title">集装箱业务</span>
              <span class="des">CONTAINER SERVICE</span>
            </div>
          </td>
          <td>
            <div class="box" @click="goName('heavyEmpty')">
              <i class="el-icon-search"></i>
              <span>提重返空</span>
            </div>

          </td>
          <td>
            <div class="box" @click="goName('emptyHeavyNum')">
              <i class="el-icon-search"></i>
              <span>提空返重(指定箱号)</span>
            </div>

          </td>
          <td>
            <div class="box" @click="goName('emptyHeavyNoNum')">
              <i class="el-icon-search"></i>
              <span>提空返重(不指定箱号)</span>
            </div>

          </td>
          <td>
            <div class="box" @click="goName('emptyBox')">
              <i class="el-icon-search"></i>
              <span>进空箱</span>
            </div>

          </td>
        </tr>
        <tr>
          <td>
            <div class="box" @click="goName('heayBoxNum')">
              <i class="el-icon-search"></i>
              <span>进重箱</span>
            </div>

          </td>
          <td>
            <div class="box" @click="goName('heavyBoxNum')">
              <i class="el-icon-search"></i>
              <span>提重箱</span>
            </div>

          </td>
          <td>
            <div class="box" @click="goName('emptyBoxNum')">
              <i class="el-icon-search"></i>
              <span>提空箱(指定箱号)</span>
            </div>

          </td>
          <td>
            <div class="box" @click="goName('emptyBoxNoNum')">
              <i class="el-icon-search"></i>
              <span>更多</span>
            </div>

          </td>
        </tr>
      </table>
    </div>
  </div>

</template>

<script>
export default {
  name: "part2",
  computed:{
    isLogin(){
      return this.$store.getters.isLogin
    },
    userType(){
      return this.$store.getters.userType
    },
  },
  methods:{
    goName(name){
      if(!this.isLogin){
        this.$router.push({name:'login'})
        return
      }
      if(this.userType.includes('货主') || this.userType.includes('货代')){
        this.$router.push({name:name})
      }else{
        this.$router.push({name:'noPermission2'})
      }
    },
  },
}
</script>

<style scoped lang="scss">

.table {
  border-collapse: collapse;
  background-image: url("../../../assets/images/table-bg1.png");
  background-size: 100% 100%;
  .bigBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url("../../../assets/images/table-box1.png");
    background-size: 100% 100%;
    .title {
      font-size: 24px;
      font-weight: 400;
      color: #333333;
    }

    .des {
      font-size: 12px;
      font-weight: 400;
      color: #666666;
    }
  }

  td {
    width: 236px;
    height: 240px;
    border: 3px solid white;


    .box {
      width: 100%;
      background-color: rgba(255, 255, 255, 0.8);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      cursor: pointer;

      &:hover {
        background-color: rgba(255, 255, 255, 0.6);
        color: #0B4AC0;

        i {
          display: inherit;
        }

      }

      i {
        font-size: 24px;
        margin-bottom: 8px;
        display: none;
      }
    }

  }
}

</style>